Après avoir couvert l'API des électrons et examiné quelques fonctionnalités et techniques supplémentaires, nous sommes maintenant prêts à construire un
électron en utilisant ce que nous avons appris.
Bien sûr, nous ne pourrons pas utiliser tous les modules que nous avons abordés dans le cours.
Mais le projet simple que j'ai préparé pour cette section couvre tous les modules clés et vous permettra
de les utiliser dans une application plus pratique et réelle.
Il s'agit alors de la section la plus importante du cours.
Alors assurez-vous de suivre.
Et si vous êtes coincé n'importe où, le code final des leçons pertinentes sera lié dans les ressources de la leçon ou
dans le référentiel de code du projet.
OK, alors cela dit, jetons un coup d'œil à ce que nous allons construire.
Le projet que j'ai préparé est une simple application de bookmarking qui nous permettra d'enregistrer des liens et de les
lire directement depuis l'application.
C'est extrêmement simple, mais plutôt que de créer une grande application compliquée, la petite application
couvrira de nombreuses techniques très importantes pour assembler tous les modules d'électrons.
Nous passerons également une partie importante du projet à affiner les fonctionnalités de base pour que l'application
s'intègre parfaitement à l'environnement de bureau.
Le point de départ de notre application est comme avant le projet QuickStart que nous avons utilisé tout au long.
Notez, cependant, que j'utiliserai un accès JavaScript brut uniquement sans bibliothèques ni frameworks d'aide.
Choisir un framework JavaScript ou un compilateur CSS nuira simplement au projet, sans parler du grand nombre
de frameworks parmi lesquels choisir.
Il y a de fortes chances que mon cadre de choix ne soit pas le vôtre.
Nous allons donc nous en tenir au code vanilla, qui vous permettra de coupler ce que vous avez appris avec votre
propre cadre de choix pour commencer.
Ensuite, je nettoierai quelques-uns des fichiers et répertoires là-dedans, commencerai un projet.
N'oubliez pas que l'application que nous construisons sera packagée dans la section suivante, nous ne voulons donc rien
laisser d'inutile.
Le premier fichier que nous pouvons nous débarrasser de l'image PNG Slashdot.
Le fichier README.
Et ce répertoire de leçons en gardant à l'esprit que vous trouverez le code final pour chacune de ces leçons de
projet dans ce répertoire, alors gardez peut-être une copie pour vous-même ou clonez une nouvelle copie à partir du dépôt, puis en termes de structure
de répertoire du projet, Je vais encore une fois garder les choses très simples.
Tout ce qui concerne le processus principal résidera dans ce répertoire de projet racine, et tout ce qui
concerne le processus de rendu ira dans un sous-répertoire appelé Renderer.
Nous pouvons créer ce répertoire.
En y passant, index dot, HTML et Renderer DOT, les deux seuls fichiers que nous ayons actuellement liés au processus
de Renderer.
Je vais également renommer ces fichiers pour qu'ils correspondent à la structure qui rendra mieux indexés sur HTML Maeng HTML, faisant référence
au contenu de la fenêtre principale.
En aucun cas une exigence, juste ma propre logique et le moteur de rendu le plus risqué pour mettre à jour JS car il contiendra la
logique principale de l'application.
Du côté Renderer, nous pouvons également ajouter une feuille de style pour ce principal contenu principal DOCSIS.
Ensuite, nous pouvons mettre à jour les références à ces fichiers en mai, et non HTML ouvrir ce fichier, en changeant d'abord.
Cette déclaration nécessite désormais d'inclure des excuses au lieu de Renderer, comme nous l'avons renommé.
Pas besoin d'inclure réellement l'extension.
Changez le titre de cette fenêtre principale pour la lire, le nom de l'application.
Et liez votre nouvelle feuille de style.
DOCSIS principal.
Nous avons également renommé ce fichier d'indexé sur HTML en Main Dot HDMI.
Mettez donc à jour le processus principal pour charger le nouveau fichier en tant que fenêtre principale du contenu de la fenêtre principale charger le fichier
de rendu slash point principal html.
Assurons-nous que tous nos changements fonctionnent.
Enregistrez ceci et les téléchargements sans aucune erreur.
Maintenant, étant une application de production, l'une des toutes premières choses que nous voudrons ajouter est la gestion de l'état pour
cette fenêtre principale de l'application.
À l'heure actuelle, il est lancé à chaque fois à ces dimensions spécifiées au centre de l'écran.
Ainsi, pour que la fenêtre conserve sa taille et sa position, nous pouvons ajouter et configurer le module d'état de la fenêtre
électronique.
Nous avons déjà couvert cela dans une leçon précédente, donc je vais l'exécuter un
peu plus rapidement, installer le module en tant que dépendance de production avec NPM I Electron Windows State Electron ajoutera un module en tant
que dépendance de production par défaut si ce n'est pas explicitement déclaré que c'est fait.
Alors redémarrez la commande watch.
Et si nous enregistrons le paquet que Jason.
Il est toujours bon de s'assurer que le paquet est répertorié, car cela sera regroupé lorsque
nous serons finalement en train de revenir en arrière pour ne pas toujours commencer par exiger l'état de la fenêtre du module serré Windows
Keepa Equals requiert l'état de la fenêtre électronique.
Copiez ce module d'exportation, et dès le début de la fonction de création de fenêtre, nous pouvons configurer notre
état keepa.
Laissez l'état égal au gardien d'état de la fenêtre en passant un objet pour la taille et les limites de la fenêtre par défaut, j'ai, bien
sûr, déjà construit cela en préparation de ces leçons.
J'ai donc des ciseaux qui fonctionneront bien, la largeur par défaut étant de 500 et la hauteur par défaut de six cinquante.
Pas besoin de spécifier les coordonnées X et Y par défaut comme valeur par défaut au centre de l'écran de toute façon.
Ensuite, pour utiliser les états persistants lorsque la fenêtre principale est créée, la coordonnée Windows
X indique deux points d'état x et Y pour indiquer la largeur du point y étant la largeur et la hauteur de l'état, la hauteur du point à deux états.
Nous utilisons donc les coordonnées X et Y par défaut, étant initialement le centre de l'écran.
Mais une fois qu'ils changent, nous voulons toujours conserver la nouvelle position de la fenêtre, d'où l'ajout du bouncier d'état X
et Y.
Je vais également appliquer certaines limites à la taille de cette fenêtre principale en définissant la largeur minimale à trois
cinquante.
Largeur maximale à 650 et hauteur minimale à 300, les limites de taille auront plus de sens une fois que l'application
fonctionnera.
Essentiellement, nous ne voulons pas qu'il soit réduit à rien, c'est là qu'interviennent la largeur et la hauteur
minimales.
Et nous ne voulons pas non plus être trop larges, car la liste des liens que l'application contiendra ne sera pas correcte
dans un format large.
Ensuite, avec notre état de fenêtre configuré, la dernière étape consiste à indiquer à cette instance de l'état de la fenêtre
la fenêtre à gérer.
State dot manage la fenêtre principale.
Sauvegarde ça.
Je vais séparer cette fenêtre des outils de développement.
Je peux maintenant le mettre en place pour le reste de cette section de projet.
Et pour conserver cette nouvelle taille et position, le up car c'est ce qui déclenchera une mise à jour de l'état dans le
module.
OK, donc un état de fenêtre est maintenant géré.
Ensuite, nous pouvons ajouter la structure HTML de base de cette fenêtre principale.
Maintenant, j'irai un peu vite en ajoutant la structure HTML, mais rappelez-vous que vous pouvez trouver le HTML de cette leçon
dans les ressources de la leçon.
Sinon, n'hésitez pas à ajouter avec moi.
Je vais commencer par remplacer ce H1 par une balise d'en-tête.
Ce sera la seule petite zone de contrôle de l'application.
Ajoutez un bouton qui servira à ajouter des éléments à l'application.
Le texte du bouton peut être un caractère plus pour indiquer l'ajout de quelque chose et n'oubliez pas que nous utiliserons du
JavaScript vanille pour sélectionner ces éléments.
Attribuez donc un ID de modèle d'exposition.
Cela aura à nouveau un peu plus de sens dans une minute.
Fondamentalement, cliquer sur le bouton Ajouter présentera un modèle pour saisir le lien que nous voulons enregistrer.
Puis toujours dans l'en-tête, le deuxième et seul autre élément étant une entrée de texte avec un identifiant tel que celui-ci
sera utilisé pour rechercher des éléments Safet, en définissant un texte de recherche fictif.
Ensuite, le contenu principal de l'application étant nos éléments enregistrés, j'utiliserai une balise principale.
Les cinq balises HTML sémantiques n'auront pas vraiment de signification dans une application d'électrons, mais elles fournissent toujours
un peu de structure et de logique lors de la lecture du code dans un conteneur dans cette balise principale pour
contenir nos éléments, les éléments d'identification et aussi dans ce principal balise distincte des éléments, a déclaré du texte, qui ne sera visible que s'il
n'y a pas d'éléments.
Aucun élément ne donnant à cette balise de paragraphe un identifiant sans élément.
Comme mentionné, lorsque nous cliquons, ce signe plus voudra présenter une simple superposition modale pour saisir et
ajouter l'élément.
Créez donc ce modèle Un div avec un ID de modal, en donnant à ce modèle une entrée de
texte pour les éléments que vous r-al id vous R-AL avec un texte d'espace réservé pour entrer votre URL, puis un bouton pour confirmer ou ajouter que
vous êtes tous les éléments saisis id ajouter.
Idem pour le texte du bouton et enfin, un deuxième bouton avec lequel annuler ou fermer ce modèle idy close model
avec le texte du bouton, annulez cet ensemble pour notre application HTML.
Alors gardez ça.
Rechargez la fenêtre principale.
Et il n'y a pas d'articles pour le moment avec un bouton pour montrer ce modèle S. année et une entrée pour rechercher des articles
SAFET, nous pouvons ajouter les styles pour cela en mai prochain.
DOCSIS Je vais commencer par définir une hauteur de 100 pour cent sur les balises HTML et body, puis styliser la
balise body seule, définir la police pour qu'elle corresponde à celle du système d'exploitation avec la légende de police Supprimez toutes les marges par défaut
sur l'élément body et définissez ce corps élément pour avoir un affichage de flex.
Ceci fait bien sûr référence au modèle de boîte flexible CCW, quelque chose que nous pouvons utiliser confortablement sans vous soucier de
la prise en charge du navigateur car nous fonctionnons dans le dernier navigateur Chrome.
Si vous n'êtes pas familier avec la boîte de Fleck, j'ai lié à un petit tutoriel dans les ressources de la leçon.
Cela nous permettra simplement d'organiser dynamiquement les notes enfants de cet élément du corps, une bien meilleure solution que
d'utiliser des pourcentages ou des flottants.
Ensuite, je vais définir certains styles de boutons par défaut, en définissant une couleur d'arrière-plan de bleu Dodger.
Couleur du texte blanc.
Rayon de la bordure de cinq pixels.
Donc, simplement arrondir notre alphabet des coins inférieurs, aucune taille de police de bordure réelle de 20 pixels et aucun contour quelque chose
de chrome ajoutera également par défaut les mêmes styles par défaut pour les entrées avec la même taille de
police que les boutons, 20 pixels, même rayon de bordure.
Mais en définissant une frontière réelle d'un pixel, en argent massif.
Remplissage à zéro en haut et en bas et 10 pixels à gauche et à droite, nous pouvons également styliser le texte de
l'espace réservé à l'intérieur de nos entrées à l'aide du modificateur d'espace réservé, donnant à ce texte une couleur gris clair.
Voilà donc quelques styles par défaut pour passer à des éléments spécifiques.
Je vais commencer par le fond gris clair de la balise d'en-tête.
Afficher également flex, car nous pouvons utiliser une boîte flexible pour le bouton, puis mettre à l'intérieur de ce rembourrage
d'en-tête de 10 pixels, poids de la police en gras.
Avec une bordure inférieure pour séparer légèrement des éléments du contenu principal, un pixel argenté.
Et un peu d'ombre encore pour aider à cette séparation du contenu principal.
Ensuite, en passant aux éléments à l'intérieur de cet en-tête, en commençant par le bouton plus ou le bouton Ajouter,
je montrerais modal.
Ce bouton ici.
Dit un peu de remplissage à nouveau, des valeurs prétestées ici, rien en haut, 12 pixels à gauche et à droite et
cinq pixels sur les 10 pixels inférieurs de la marge droite.
Et une police légèrement plus grande que la police de bouton standard à 30 pixels, ensuite, l'entrée de recherche dans
l'en-tête.
Cela a déjà un style du sélecteur d'entrée, mais pour qu'il occupe le
reste de son élément parent, cet en-tête lui attribue une valeur de croissance flexible de un, enregistrez-le, rechargez la fenêtre principale ou faites
de même pour le conteneur de cet élément .
Mais au lieu de le faire grossir en mots, je le ferai prendre la hauteur restante sous
l'en-tête, ce qui signifie que nous devrons faire du conteneur parent une colonne flex au lieu d'un paramètre de ligne sur la colonne
de flux flex de l'aliment corps.
Enregistrez cette recharge là-bas, nous avons maintenant cela en haut, puis les éléments et à droite en bas, cette fenêtre modale,
qu'il nous faut encore styliser et masquer.
Avant de faire cela, je vais améliorer cela.
Aucun élément, texte, identification d'oiseau, aucun élément.
Épaisseur de la police en gras.
Carlos Silva.
Ligne centrale à.
Avec une valeur de 100% et pour nous assurer que nos éléments, une fois que nous en ajoutons,
sont au-dessus de ce message, donc en le cachant essentiellement, définissez-le pour avoir une position absolue à 100 pixels du
haut de son conteneur parent et un index Z de moins un, en le réglant pour qu'il soit toujours à l'arrière du modèle.
Ensuite, nous voulons que cela superpose l'ensemble de l'application lorsqu'elle est ouverte.
Alors réglez-le pour qu'il soit également positionné de manière absolue à 100%.
I 100 pour cent avec une couleur de fond noir légèrement transparente utilisant eBay de zéro zéro zéro ou noir et une transparence de zéro virgule
huit cinq flex d'affichage afin que nous puissions utiliser la boîte flexible sur les éléments à l'intérieur de
ce modèle.
Un élément de campagne au centre étant tout élément flexible à l'intérieur de ce modèle, aligne également le contenu au centre avec le représentant
flexible pour envelopper le représentant des éléments signifiés à une nouvelle ligne.
Quand il devient trop large, nous pouvons vérifier cette recharge pour y arriver.
Le modèle va bien.
Juste besoin de finaliser ces éléments.
Et bien sûr, une fois que nous l'avons prêt, nous voudrons que le modèle soit caché.
Donc n'en afficher aucun, que je laisse commenté pour l'instant afin que nous puissions le tester avec cette propriété d'affichage
flex à la place, ce qui s'appliquera lors de l'affichage du style modal.
L'identifiant d'entrée Ural humoral à nouveau flex croît à un sens occupant tout l'espace disponible qui, avec cet ensemble
d'enveloppes flexibles, représentera 100% du conteneur modal s'il est disponible.
A également déclaré la largeur explicitement à 100 pour cent.
Quelques marges pour l'espacer.
Zéro 25 en haut à gauche et à droite et 15 pixels en bas.
Enfin, du padding, 10 pixels, puis les boutons modaux.
Les deux peuvent obtenir un remplissage, 10 pixels, cibler le bouton d'annulation.
Ensuite, je fermerais le fond modal blanc.
Avec du texte noir et espacez-le du bouton d'ajout à sa gauche de 15 pixels, enfin, le bouton d'ajout.
Je vais juste compenser cela du côté du modèle par les mêmes 25 pixels que l'entrée.
Enregistrez ceci, rechargez l'application, et c'est à quoi ressemblera notre modèle lorsqu'il sera ouvert avec le
bouton plus dans l'Apsara, nous pouvons maintenant masquer le modèle, activer cette propriété d'affichage, enregistrer et recharger à nouveau.
Il y a un simple message nous disant que nous n'avons aucun élément pour le moment et que toute l'interface utilisateur est prête pour que
nous puissions commencer à nous connecter avec un événement dans la prochaine leçon.